<template>
  <div class="billboard">
    <div class="back-wrapper">
      <div class="container wrapper-contain">
        <div class="wrapper-left">
          <TCarousel
            :autoPlay="false"
            :duration="1000"
            :hasDot="false"
            dotBgColor="#e91e63"
            @UpdateIdx="UpdateIdx"
          >
            <template v-slot:CarItem>
              <div class="carousel-container">
                <t-car-item
                  v-for="(item,index) of BillboardCarData"
                  :key="index"
                  :ItemSize="ItemSize"
                  :itemLen="BillboardCarData.length"
                  :current="CalCur"
                >
                  <div class="carousel-mce">
                    <img :src="require(`@/assets/images/home/Billboard-mce1.png`)"/>
                  </div>
                  <a class="carousel-img" href="javascript:;">
                    <img :src="require(`@/assets/images/home/${item.imgsrc}`)"/>
                  </a>
                </t-car-item>
              </div>
            </template>
          </TCarousel>
          <!-- <Carousel
            :autoPlay="false"
            :duration="1000"
            :hasDot="false"
            dotBgColor="#e91e63"
            @UpdateIdx="UpdateIdx"
          >
            <template v-slot:CarItem>
              <div class="carousel-container">
                <car-item
                  v-for="(item,index) of BillboardCarData"
                  :key="index"
                  :ItemSize="ItemSize"
                >
                  <div class="carousel-mce">
                    <img src="@/assets/images/home/Billboard-mce1.png" alt="尖叫热歌榜" />
                  </div>
                  <a class="carousel-img" href="javascript:;">
                    <img :src="require(`@/assets/images/home/${item.imgsrc}`)" :alt="item.alt" />
                  </a>
                </car-item>
              </div>
            </template>
          </Carousel>-->
          <a class="slide-title" href="Javascript:;">{{BillboardCarData[CalCur.index].alt}}</a>
          <p class="new-time">每小时更新</p>
          <div class="play_billboard">
            <i class="iconfont icon-iconset0481"></i>
            播放榜单
          </div>
        </div>
        <div class="wrapper-items">
          <div class="slimScrollDiv">
            <div class="item-column" v-for="(item,index) in Songs[CalCur.index].data" :key="index">
              <Item :data="item" :id="(index+1)"></Item>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BillboardCarData from "@/data/home/BillboardCarousel.js"
import Songs from '@/data/home/songs.js'

import Item from '../ItemColumnItem'

import {reactive,toRefs} from "vue"
export default {
    name:"Billboard",
    components:{
        Item
    },
    setup(){
        const state = reactive({
            // CurrentIndex: 0,
            CalCur:{
                index:0,
                dir:"next"
            }
        })
        const UpdateIdx = (obj)=>{
            state.CalCur.index = obj.index;
            state.CalCur.dir = obj.dir;
        }

        return{
            ...toRefs(state),Songs,
            BillboardCarData,ItemSize:{
                "--Itemwidth":"46%",
                "--Itemheight":"100%",
                "--cItemWidth":"37%",
                "--cItemHeight":"81%",
                "--cItemLeft":"-5%",
                "--cItemRight":"60%"
            },
            UpdateIdx
        }
    }
}
</script>

<style lang="scss">
.billboard {
  .wrapper-contain {
    position: relative;
    padding: 21px 30px 21px 560px;
    box-sizing: border-box;

    .wrapper-left {
      width: 462px;
      position: absolute;
      left: 0;
      top: 0;
      .c-button {
        justify-content: center;
      }
      .carousel-container {
        width: 462px;
        height: 213px;
        margin-top: 70px;
        overflow: inherit;
        position: relative;
        left: 4%;
        .car-item {
          border-radius: 8px;
          overflow: hidden;
        }
        .carousel-mce {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          text-align: center;

          &::before {
            content: "";
            display: block;
            width: 50px;
            height: 17px;
            position: absolute;
            top: 10px;
            left: 14px;
            background: url("../../../assets/images/home/rank-logo.png") top
              left no-repeat;
            z-index: 0;
          }
        }
        .c-right,
        .c-left {
          .carousel-mce {
            &::before {
              left: 3%px;
            }
          }
          .carousel-mce,
          .carousel-img {
            width: 100%;
            display: inline-block;
            text-align: center;
            img {
              width: 100%;
              height: 100%;
              display: inline-block;
              border-radius: 8px;
            }
          }
        }
      }

      .slide-title {
        font-size: 18px;
        text-align: center;
        font-weight: 700;
        margin: 20px auto 0;
        display: block;
        cursor: pointer;
      }
      .new-time {
        opacity: 0.3;
        text-align: center;
        margin-top: 15px;
      }
      .play_billboard {
        width: 140px;
        height: 40px;
        text-align: center;
        line-height: 38px;
        border: 1px solid #333;
        border-radius: 20px;
        margin: 22px auto;
        box-sizing: border-box;
        font-weight: 700;
        cursor: pointer;
      }
    }
    .wrapper-items {
      height: 432px;
      .slimScrollDiv {
        position: relative;
        overflow: auto;
        width: 100%;
        height: 100%;

        &::-webkit-scrollbar {
          width: 8px;
        }
        &::-webkit-scrollbar-track {
          background-color: transparent;
          -webkit-border-radius: 2em;
          -moz-border-radius: 2em;
          border-radius: 2em;
        }
        &::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.3);
          -webkit-border-radius: 2em;
          -moz-border-radius: 2em;
          border-radius: 2em;
        }

        .item-column {
          width: 100%;
          height: 72px;
          margin-bottom: 0;
          padding: 0;

          .thumb {
            height: 72px;
            padding: 6px 65px 6px 152px;
            box-sizing: border-box;

            .item-num {
              position: absolute;
              line-height: 72px;
              left: 24px;
              top: 0;
            }
            .ItemCol-img-box {
              width: 60px;
              height: 60px;
              position: absolute;
              left: 63px;
              top: 6px;
            }
            .item-info {
              .name {
                float: left;
                line-height: 60px;
                width: 56.66667%;
                margin-right: 1.66667%;
                padding-top: 0;
              }
              .singer {
                float: left;
                line-height: 60px;
                width: 40%;
                color: rgba(51, 51, 51, 0.6);
              }
            }
          }
        }
      }
    }
  }
}
</style>